<template>
  <div class="header">
    <div class="tools">
      <div class="left">
        <van-icon name="bars" @click="toggleSideBarVisibility" :color="showSideBar? 'blue':'black'"/>
      </div>
      <div class="center" @click="goBookPage">{{ bookName }}</div>
      <div class="right">
        <span @click="goHome">首页</span>
        <!-- <van-icon name="wap-home-o"  /> -->
        <!-- <van-icon name="revoke" @click="goBack"/> -->
      </div>
    </div>
    <transition name="van-fade">
      <div class="shadow" v-if="showSideBar" @click="hideSideBar"></div>
    </transition>
    <transition name="van-slide-left">
      <van-sidebar v-model="sidebarActiveKey" @change="sidebarChange" v-if="showSideBar" class="sidebar">
        <van-sidebar-item v-for="(item,index) in sidebarNav" :key="'nav'+index" :title="item.name" />
        <van-sidebar-item v-for="(item,index) in categoryList" :key="'c'+index" :title="item.title"/>
      </van-sidebar>
    </transition>
    
  </div>

</template>
<script>
export default {
  name:'CategoryHeader',
  data(){
    return {
      showSideBar: false,
      categoryList: [],
      sidebarActiveKey: 0,
      bookId:'',
      bookName:'',
      categoryId:'',
      sidebarNav:[
        { name:'首页',path:()=>this.goHome() },
        { name:'搜索',path:'/searchResult'},
        { name:'返回',path:()=>this.goBack()}
      ]
    }
  },
  async created() {
    let bookId = this.$route.query.bookId
    let bookName = this.$route.query.bookName
    let categoryId = this.$route.query.categoryId
    this.bookId = bookId
    this.bookName = bookName
    this.categoryId = categoryId
    this.categoryList = await this.$axios.get('/api/getAllCategoryTitle?bid=' + bookId) 
    let cIndex = this.categoryList.findIndex(item=>{
      return item.id === this.categoryId
    })
    this.sidebarActiveKey = cIndex + this.sidebarNav.length
  },
  methods: {
    sidebarChange(index){
      if(index < this.sidebarNav.length){
        let path = this.sidebarNav[index].path
        // console.log('path:',path);
        if(typeof path === 'string'){
          this.$router.push(path)
        }else{
          path()
        }
      }else{
        this.showSideBar = false
        let category = this.categoryList[index - this.sidebarNav.length]
        this.$router.push({path:'/category', query : { bookId: this.bookId, categoryId: category.id, bookName:this.bookName}})
      }
    },
    toggleSideBarVisibility(){
      uMengTj('章节页','点击','左上角工具条')
      this.showSideBar = ! this.showSideBar
    },
    hideSideBar(){
      this.showSideBar = false
    },
    goHome(){
      this.commonData.clearPageHistory(this.commonData.categoryPageHistoryKey)
      this.$router.push('/')
    },
    goBack(){
      this.commonData.clearPageHistory(this.commonData.categoryPageHistoryKey)
      this.$router.back()
    },
    goBookPage(){
      this.$emit('goBookPage')
    }

  },
}
</script>
<style lang="scss" scoped>
.header{
  
  .tools{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 44px;
    padding: 0px 12.5px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom:1px solid #e8e8e8;
    background: white;
    font-size: 24px;
    .left{
      display: flex;
      align-items: center;
    }
    .center{
      font-size: 16px;
    }
    .right{
      font-size: 16px;
    }
  }
  .shadow{
    position: fixed;
    width: 100%;
    height: 100%;
    top:44px;
    left: 0px;
    background: rgba(0,0,0,0.7);
    z-index: 1;
  }
  .sidebar{
    position: fixed;
    // border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    width: 60%;
    top:44px;
    height: calc(100% - 44px);
    z-index: 2;
  }
}
</style>